{extend name="common@admin_base" /}

{block name="head_extends"}

{/block}
{block name="body"}
<div class="layui-layout layui-layout-admin height100">
    <div class="layui-header">
        <div class="layui-logo"><a href="/">{$sysConfigs['app.base.name']}</a></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="#">控制台</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="side">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="{$user.headimg}" class="layui-nav-img">
                    {$user.nickname}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/admin/user/center" class="sonMenu" id="base">基本资料</a></dd>
                    <dd><a href="" class="sonMenu" id="safe">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="{$_form.login_out}">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="side">
                {if condition="isset($menus)"}
                {volist name="menus" id="menu"}
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">{$menu->name}</a>
                    <dl class="layui-nav-child">
                        {volist name="menu['son']" id="son"}
                        <dd><a href="{$son->url}" id="{$son->id}" class="sonMenu">{$son->name}</a></dd>
                        {/volist}
                    </dl>
                </li>
                {/volist}
                {/if}
            </ul>
        </div>
    </div>

    <div class="layui-body height100">
        <div class="layui-tab height100" lay-filter="tab" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this">首页</li>
            </ul>
            <div class="layui-tab-content height100"   style="background-color: #f5f5f5">
                <div class="layui-tab-item layui-show">
                    <div class="layui-col-md2">
                        <div class="layui-card layui-text" lay-filter="card" style="text-align: center">
                            <div class="layui-card-header">
                                <h3 class="layui-layer-title">
                                    待审核文章数量
                                </h3>
                            </div>
                            <a class="sonMenu" id="toBeAudited" href="/admin/article/index">{$toBeAuditedArticles|count}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © vovoqi.com - 备案号:{$sysConfigs['app.base.record.number']}
    </div>
</div>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        element.on('nav(side)', function(elem){
            var li = $("li[lay-id="+elem[0].id+"]").length;
            if (li) {
                element.tabChange('tab', elem[0].id);
            }else {
                element.tabAdd('tab', {
                    title: elem.text() //用于演示
                    , content: "<iframe src=\""+elem[0].href+"\" frameborder=\"0\" style='width: 100%;height: 100%;'></iframe>"
                    , id: elem[0].id
                });
                element.tabChange('tab', elem[0].id);
                $('.layui-show').css({
                    width:"100%",
                    height:"100%"
                });
            }
        });
        
        $('#toBeAudited').on('click',function () {
            var li = $("li[lay-id="+6+"]").length;
            if (li) {
                element.tabChange('tab', 6);
                return ;
            }
            element.tabAdd('tab',{
                title:'文章列表'
                ,id:6
                ,content:"<iframe src=\""+$(this)[0].href+"\" frameborder=\"0\" style='width: 100%;height: 100%;'></iframe>"
            });
            element.tabChange('tab', 6);
            $('.layui-show').css({
                width:"100%",
                height:"100%"
            });
        });
    });

    $(function () {
        $('.sonMenu').on('click',function () {
            return false;
        });
    });
</script>
{/block}